<template>
  <div class="container-header">
    <header class="mui-bar mui-bar-nav">
      <span>环信(<span>{{getTotalUnreadNum}}</span>)</span>
      <span class="right">
        <span class="mui-icon mui-icon-search" @click="toSearchView"></span>
        <span><a id="menu" class="mui-action-menu mui-icon mui-icon-close mui-pull-right" href='#topPopover'></a></span>
    </span>
    </header>
    <div id="topPopover" class="mui-popover" >
      <div class="mui-popover-arrow"></div>
      <div class="popover-item popover-item-creategroup">
         <span class="item-icon icon-bubble"></span>创建群聊
      </div>
      <div class="popover-item popover-item-addfriend">
        <span class="item-icon icon-user-plus"></span>添加好友
      </div>
      <div class="popover-item popover-item-scan">
        <span class="item-icon icon-checkbox-unchecked"></span>扫一扫
      </div>
      <div class="popover-item popover-item-money">
        <span class="item-icon icon-cloud-check"></span>收付款
      </div>
      <div class="popover-item popover-item-help">
        <span class="item-icon icon-mail4"></span>帮助与反馈
      </div>
    </div>
  </div>

</template>

<script>
  import {mapGetters} from 'vuex'
  export default {
    computed: {
      ...mapGetters(['getTotalUnreadNum'])
    },
    mounted() {
      this.init()
      // mui.init()
      // mui('.mui-scroll-wrapper').scroll()
      // mui('body').on('shown', '.mui-popover', function(e) {
        // console.log('shown', e.detail.id);//detail为当前popover元素
      // })
      // mui('body').on('hidden', '.mui-popover', function(e) {
        // console.log('hidden', e.detail.id);//detail为当前popover元素
      // })
    },
    methods: {
      toSearchView() {
        this.$router.push('/searchview')
      },
      init() {
        var self = this
        this.$immui.init()
        this.$immui('.container-header').on('tap', '.popover-item-addfriend', function(e) {
          let addDiv = document.getElementById('topPopover')
          addDiv.classList.remove('mui-active')
          // console.log(this.parentNode.parentNode.parentNode.siblings)
          // 选到App下的第三个孩子，直接控制display=none
          let node = this.parentNode.parentNode.parentNode.parentNode.children[2]
          node.style.display = 'none'
          // console.log(this)
          self.$router.push('/addfriends')
        })
        this.$immui('.container-header').on('tap', '.popover-item-creategroup', function(e) {
          let addDiv = document.getElementById('topPopover')
          addDiv.classList.remove('mui-active')
          // console.log(this.parentNode.parentNode.parentNode.siblings)
          // 选到App下的第三个孩子，直接控制display=none
          let node = this.parentNode.parentNode.parentNode.parentNode.children[2]
          node.style.display = 'none'
          // console.log(node)
          self.$router.push('/creategroup')
        })
      }
    }
  }
</script>

<style lang='scss' scoped>
@import "../../../public/scss/style.css";
.container-header{
  height: 40px;
  line-height: 40px;
  background: #f5f5f5;
  color: #000;
  padding: 0 5px;
  font-weight: 600;
  .mui-icon{
    font-weight: 600;
  }
  .right{
    /*padding-right:5px;*/
    float: right;
    .mui-icon-close{
      transform: rotateZ(45deg);
    }
  }
  .mui-icon-search{
    padding-right: 20px!important;
  }
  #menu{
    color: black;
  }
.mui-popover{
  width: 180px;
  right: 5px!important;
}
.mui-popover .mui-popover-arrow{
  right: 5px;
}
.popover-item{
  height: 50px;
  // text-align: center;
  padding-left: 30px;
  line-height: 50px;
  .item-icon{
    padding-right: 20px;
  }
}
}
</style>
